import {
    addParamsApi,
    updateParamsApi
} from '@/api/params'
export default {
    props: {
        attrs: {
            type: Array,
            default: () => []
        }
    },
    data() {
        // 属性名的唯一性验证
        const checkAttrName = (rules, value, callback) => {
            // console.log(this.attrs)
            if (this.editForm.attr_id) {
                // edit
                const attr = this.attrs.find(item => item.attr_name === value && item.attr_id !== this.editForm.attr_id)
                if (attr && attr.attr_name) {
                    return callback(new Error('属性名称重复'))
                }
            } else {
                // add
                const attr = this.attrs.find(item => item.attr_name === value)
                if (attr && attr.attr_name) {
                    return callback(new Error('属性名称重复'))
                }
            }
            callback()
        }
        return {
            // 对话框的显示和隐藏
            editDialogVisible: false,
            // 表单数据
            editForm: {
                cat_id: '', // 分类id
                attr_id: '', // 属性id
                attr_name: '', // 属性名称
                attr_sel: '' // 类型：only和many
            },
            // 表单验证
            editFormRules: {
                attr_name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }, {
                    validator: checkAttrName,
                    trigger: 'blur'
                }]
            }
        }
    },
    computed: {
        // 标题
        titleText() {
            return (this.editForm.attr_id ? '修改' : '添加') + (this.editForm.attr_sel === 'many' ? '动态参数' : '静态属性')
        },
        // 文本框的名称
        labelText() {
            return this.editForm.attr_sel === 'many' ? '动态参数' : '静态属性'
        }

    },
    methods: {
        // 打开对话框
        openDialog(row) {
            this.editDialogVisible = true
            if (row && row.attr_id) {
                // 编辑操作
                this.editForm.attr_id = row.attr_id
                this.editForm.attr_name = row.attr_name
                this.editForm.attr_sel = row.attr_sel
                this.editForm.cat_id = row.cat_id
            } else {
                // 添加操作
                this.editForm.attr_sel = row.attr_sel
                this.editForm.cat_id = row.cat_id
            }
        },
        // 提交修改
        submitParams() {
            this.$refs.formRef.validate(async valid => {
                if (!valid) return this.$message.error('验证不通过')
                if (this.editForm.attr_id) {
                    // 编辑
                    const res = await updateParamsApi({
                        catId: this.editForm.cat_id,
                        attrName: this.editForm.attr_name,
                        attrSel: this.editForm.attr_sel,
                        attrId: this.editForm.attr_id
                    })
                    if (res.meta.status !== 200) return this.$message.error('更新属性失败')
                    this.$message.success('更新属性成功')
                } else {
                    //  添加
                    const res = await addParamsApi({
                        catId: this.editForm.cat_id,
                        attrName: this.editForm.attr_name,
                        attrSel: this.editForm.attr_sel
                    })
                    if (res.meta.status !== 201) return this.$message.error('添加属性失败')
                    this.$message.success('添加属性成功')
                }
                this.editDialogVisible = false
                this.$emit('on-edit')
            })
        },
        // 关闭对话框时触发
        editDialogClosed() {
            this.editForm.cat_id = ''
            this.editForm.attr_name = ''
            this.editForm.attr_id = ''
            this.editForm.attr_sel = ''
        }
    }
}